<template>
  <div id="index-l">
    <div class="index-l-1 index-l-0">
        <ul class="index-ul">
            <div class="top-s">人员汇总</div>
            <div class="set-con set-flex">
                <div class="chart-box">
                    <!-- <div style="width: 50%;" ref="ringChar"></div> -->
                    <!-- <div class="ring-s" style="width: 50%;">
                        <div class="out-ring"></div>
                        <div style="width: 100%;height: 100%;" ref="ringChar"></div>
                        <div class="in-ring">工种</div>
                    </div> -->
                    <div class="line-s" style="width: 100%;">
                        <span>实际出勤</span>
                        <div style="width: 100%; height: 100%;" ref="lineChar"></div>
                    </div>
                </div>
            </div>
        </ul>
    </div>

    <div class="index-l-4 index-l-0">
        <ul class="index-ul char">
            <div class="top-s">车辆进出</div>
            <div class="set-con set-flex">
                <ul class="car-s">
                    <li><span class="text-s" style="width: 30px;">进</span><span class="car-info in-s">428</span></li>
                    <li style="margin: 0 10px;"><span class="text-s" style="width: 30px;">出</span><span class="car-info out-s">435</span></li>
                    <li><span class="text-s" style="width: 30px;">滞留</span><span class="car-info stay-s">347</span></li>
                </ul>
                <div :style="fontSizeFun" class="index-l-4-echarts" ref="carChar"></div>
            </div>
        </ul>
    </div>

    <div class="index-l-4 index-l-0">
        <ul class="index-ul char">
            <div class="top-s">巡检不良数</div>
            <div class="set-con">
                <div :style="fontSizeFun" class="index-l-4-echarts" ref="checkCharTwo"></div>
            </div>
        </ul>
    </div>
  </div>
</template>

<script>
import bz from './img/bz.png'
import * as echarts from 'echarts'
export default {
  name: 'index-l',
  data() {
    return {
        dataList: [{
            num: '23982', srcImg: bz , title: '访客人数' , sizeColor: '#006BFF'
        },{
            num: '26', srcImg: bz , title: '日访客户' , sizeColor: '#00E5FF'
        },{
            num: '280', srcImg: bz , title: '月访客户' , sizeColor: '#FFB300'
        }]
    };
  },
  components: {},
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
        // that.initChartsOne()
        that.initChartsTwo()
        // that.optionRing()
        that.optionLine()
        that.initChartsCarChar()
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },

    /*** 人员汇总 */
    /*** optionRing 饼图 */
    // optionRing(){
    //     let myChart = echarts.init(this.$refs.ringChar)
    //     let option = {
    //         tooltip: {
    //             trigger: 'item',
    //             position: 'right',
    //         },
    //         series: [
    //             {
    //                 type: 'pie',
    //                 radius: ['30%','50%'],
    //                 center: ['50%','50%'],
    //                 data: [
    //                     { value: 1048, name: '质量部' },
    //                     { value: 735, name: '采购部' },
    //                     { value: 580, name: '综合部' },
    //                     { value: 484, name: '工程部' },
    //                     { value: 300, name: '商务部' }
    //                 ],
    //                 labelLine:{
    //                     length1: 5,
    //                     length2: 22,
    //                 },
    //                 label: {
    //                     formatter: '{b}\n{d}%',
    //                     padding: [0,-20,0,-20],
    //                     color: '#FFFFFF',
    //                 },
    //             }
    //         ]
    //     }
    //     return option && myChart.setOption(option)
    // },

    /*** optionLine 柱状图 */
    optionLine(){
        let myChart = echarts.init(this.$refs.lineChar)
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value',
                data: [],
                // position: 'top',
                // 轴线设置
                axisLine:{
                    show: true,
                    lineStyle: {
                        color:'rgba(236, 236, 236,0)',
                    },
                    interval: 0
                },
                // 轴线文字内容设置
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgb(21,136,189)"
                    },
                },
                // 分割线颜色
                splitLine: {
                    lineStyle: {
                        color: 'rgba(14 , 54 , 110 , 1)'
                    }
                }
            },
            yAxis: {
                type: 'category',
                // 轴线设置
                axisLine:{
                    lineStyle: {
                        color:'rgba(14 , 54 , 110 , 1)',
                    },
                    interval: 0
                },
                // 轴线文字内容设置
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgb(21,136,189)"
                    },
                },
                // 是否显示轴线的刻度标签
                axisTick: {
                    show: false
                },
                
            },
            grid:{
                top: 0,
                bottom: 20,
                left: 10,
                right: 10,
                containLabel: true
            },
            series: [
                {
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(68, 142, 248, 0.1)',
                    },
                    itemStyle: {
                        // color: 'rgba(68, 142, 248, 1)'
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: 'rgb(6,74,104)' },
                            { offset: 1, color: 'rgb(6,204,253)' }
                        ])
                    },
                    barMaxWidth: '36%',
                }
            ]
        }
        option.yAxis.data = ['质量部','采购部','综合部','工程部','商务部']
        option.series[0].data = [10,20,30,40,50]
        return option && myChart.setOption(option)
    },

    initChartsCarChar(){
        let myChart = echarts.init(this.$refs.carChar)
        let option = {
            legend: {
                bottom: 4,
                left: 'center',
                textStyle:{
                    color:'#FFFFFF',
                },
                itemWidth: 12,
                itemHeight: 12,
                padding: 0,
                data: [
                    {name: '进',icon: 'rect',itemStyle:{color:'rgb(6,206,255)'}},
                    {name: '出',icon: 'rect',itemStyle:{color:'rgb(255,195,0)'}},
                    {name: '滞留',icon: 'rect',itemStyle:{color:'rgb(159,224,128)'}},
                ],
            },
            grid: {
                left: '2%',
                top:20,
                right: '2%',
                bottom: 30,
                containLabel: true
            },
            tooltip: {},
            dataset: {
                dimensions: ['product', '进', '出', '滞留'],
                source: []
            },
            xAxis: { 
                type: 'category',
                axisLine:{
                    lineStyle: {
                        color:'#3f6986',
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "#FFFFFF"
                    } 
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        color: ['#3f6986']
                    }
                },
                axisLine:{
                    lineStyle: {
                        color:'#3f6986',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#FFFFFF"
                    } 
                }
            },
            series: [
                { 
                    type: 'bar',
                    barMaxWidth: '15%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(6,204,253,1)' },
                            { offset: 1, color: 'rgba(6,74,104,1)' }
                        ])
                    }
                }, 
                { 
                    type: 'bar',
                    barMaxWidth: '15%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(251,193,0,1)' },
                            { offset: 1, color: 'rgba(97,74,0,1)' }
                        ])
                    }
                },
                { 
                    type: 'bar',
                    barMaxWidth: '15%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(159,224,128,1)' },
                            { offset: 1, color: 'rgba(64,107,44,1)' }
                        ])
                    }
                },
            ]
        }
        option.dataset.source = [
            { product: '06:00', '进': 43, '出': 85, '滞留': 93 },
            { product: '09:00', '进': 83, '出': 73, '滞留': 55 },
            { product: '12:00', '进': 86, '出': 65, '滞留': 82 },
            { product: '15:00', '进': 72, '出': 53, '滞留': 39 },
            { product: '18:00', '进': 72, '出': 53, '滞留': 39 },
            { product: '21:00', '进': 72, '出': 53, '滞留': 39 }
        ]
        return option && myChart.setOption(option)
    },

    initChartsTwo(){
        let myChart = echarts.init(this.$refs.checkCharTwo)
        let option = {
            grid: {
                left: '2%',
                top: 20,
                right: '2%',
                bottom: 4,
                containLabel: true
            },
            tooltip: {},
            dataset: {
                dimensions: ['日期', '数量'],
                source: []
            },
            xAxis: { 
                type: 'category',
                axisLine:{
                    lineStyle: {
                        color:'#3f6986',
                    },
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "rgb(145,179,203)"
                    },
                    interval: 0
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        color: ['#3f6986']
                    }
                },
                axisLine:{
                    lineStyle: {
                        color:'#3f6986',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgb(145,179,203)"
                    } 
                }
            },
            series: [
                { 
                    type: 'bar',
                    barMaxWidth: '34%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgb(0,253,236)' },
                            { offset: 1, color: 'rgb(1,37,35)' }
                        ])
                    }
                },
            ]
        }
        option.dataset.source = [
            ['02-01', 43.3 ],
            ['02-05', 83.1],
            ['02-10', 86.4 ],
            ['02-15', 72.4],
            ['02-20', 72.4],
            ['02-25', 72.4],
            ['02-30', 72.4]
        ]
        return option && myChart.setOption(option)
    },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
/*** 滚动条样式优化 */

#index-l{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .index-l-0{
        // margin-bottom: 10px;
        height: 32.7%;
    }
    .char{
        height: 100%;
        .index-l-4-echarts{
            width: 100%;
            height: 100%;
        }
    }
    .index-ul{
        background: rgba($color: #0F2F5C, $alpha: 0.2);
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            // font-size: 14px;
            font-style: oblique;
            background: rgba($color: #153863, $alpha: 0.4);
        }
        .chart-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 90%;
            margin: 10px auto 0 auto;
            height: 78%;
            // border: 1px solid red;
            .line-s{
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    margin-bottom: 5px;
                }
            }
            .ring-s{
                height: 72%;
                position: relative;
                // border: 1px solid red;
                .out-ring{
                    position: absolute;
                    width: 5vw;
                    height: 5vw;
                    top: 50%;
                    left: 50%;
                    margin-top: -2.5vw;
                    margin-left: -2.5vw;
                    border-radius: 50%;
                    border: 1px dashed rgb(57,114,212);
                }
                .in-ring{
                    position: absolute;
                    width: 2vw;
                    height: 2vw;
                    top: 50%;
                    left: 50%;
                    margin-top: -1vw;
                    margin-left: -1vw;
                    border-radius: 50%;
                    border: 1px solid rgb(57,114,212);
                    display: block;
                    background-image: linear-gradient(to right, #f63031, #f7b33b);
                    -webkit-background-clip: text;
                    color: transparent;
                    font-weight: 1000;
                    font-size: 10px;
                    text-align: center;
                    line-height: 2vw;
                    font-style: italic;
                }
            }
        }
        .car-s{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 56%;
            margin: 10px auto 0 auto;
            li{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;  
            }
            .in-s , .out-s , .stay-s{
                padding: 5px 10px;
                margin-left: 5px;
                color: #FFFFFF;
            }
            .in-s{
                background: rgba($color: #00DDFF, $alpha: 0.5);
            }
            .out-s{
                background: rgba($color: #FFC300, $alpha: 0.5);
            }
            .stay-s{
                background: rgba($color: #9FE080, $alpha: 0.5);
            }
        }
        // 安全生产天数
        .index-li{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            li{
                width: 32%;
                img{
                    display: block;
                    margin: auto;
                    width: 40%;
                }
            }
            .index-l-1-n{
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 600;
                    margin-top:10px;
                }
                p{
                    width: 100%;
                    text-align: center;
                    margin-top: 8px;
                    font-size: 14px;
                }
            }
        }

        // 人员信息
        .index-r{
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            width: 96%;
            border: 1px solid rgb(2,123,236);
            margin: 10px auto 0 auto;
            .index-r-title{
                width: 30%;
                span{
                    display: block;
                    color: #00E5FF;
                    font-size: 14px;
                    font-weight: 600;
                    font-style: oblique;
                    width: 100%;
                    text-align: center;
                    background: rgb(8 ,70 ,143);
                    padding: 5px 0;
                }
                p{
                    width: 100%;
                    font-size: 14px;
                    text-align: center;
                    background: rgb(3 ,44 ,90);
                    padding: 5px 0;
                    .index-r-p{
                        font-weight: 600;
                        margin-left: 4px;
                    }
                }
            }
            .index-r-s{
                width: 30%;
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    i{
                        color: #00FF28;
                        margin-left: 4px;
                    }
                }
            }
            .line{
                width: 1px;
                height: 24px;
                background: linear-gradient(to top, rgba($color: #0A275D, $alpha: 0) 0%,#00E5FF 50%, rgba($color: #0A275D, $alpha: 0) 100%);
            }
        }
    }
}
</style>